// 导入变量
@use './variables.scss' as *;

// 字体设置
@font-face {
	font-family: 'Alibaba-PuHuiTi';
	src: url('@/assets/font/Alibaba-PuHuiTi-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

// 重置样式
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Alibaba-PuHuiTi', sans-serif;
	font-size: 14px;
}

// 应用自定义颜色到自己的组件而不是Element Plus
body:not(.el-popup-parent--hidden) > *:not(.el-overlay),
.index, .layout, .content, .menu, 
.main, .desc, .head, .title,
.task, .login, .regis, .report, .device-manage,
p, h1, h2, h3, h4, h5, h6, span, div:not(.el-*) {
	color: #fff;
}

// 确保我们的应用内容使用白色文字
.index, .layout {
	color: #fff;
}

.flex {
	display: flex;
}

.flex-aic {
	@extend .flex;
	align-items: center;
}

.flex-juc {
	@extend .flex;
	justify-content: center;
}

.flex-center {
	@extend .flex-aic;
	@extend .flex-juc;
}

.flex-column {
	@extend .flex;
	flex-direction: column;
}
.flex-ju-sb{
	@extend .flex;
	justify-content: space-between;
}
.flex-ju-around {
	@extend .flex;
	justify-content: space-around;
}
.flex-ju-evenly {
	@extend .flex;
	justify-content: space-evenly;
}

.flex-ju-end{
	@extend .flex;
	justify-content: flex-end;
}
.flex1{
	flex: 1;
}

//设置垂直滚动条样式
::-webkit-scrollbar {
	width: 8px; // 滚动条宽度
}

// 滚动条轨道
::-webkit-scrollbar-track {
	background: rgb(244, 244, 245);
	border-radius: 4px;
}

// 滚动条滑块
::-webkit-scrollbar-thumb {
	background: rgb(200, 201, 204);
	border-radius: 4px;
	transition: background 0.3s ease;
}

// 滚动条滑块悬停状态
::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

// 滚动条滑块激活状态
::-webkit-scrollbar-thumb:active {
	background: #888;
}